<template>
  <div id="main1" style="width: 100%; height: 100%;"></div>
</template>

<script>
  import * as echarts from 'echarts';

  export default {
    mounted() {
      // this.initDataChart();
    },
    methods: {
      initDataChart(data) {
        const chartDom = document.getElementById('main1');
        const myChart = echarts.init(chartDom);
        console.log(data);

        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: data.days,
              axisLabel: {
                color: '#ffffff' // 新增：x轴刻度标签文字颜色设为白色
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                color: '#ffffff' // 新增：y轴刻度标签文字颜色设为白色
              }
            }
          ],
          series: [
            {
              name: '告警数',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              smooth: true,
              data: data.nums
            }
          ]
        };

        option && myChart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function () {
          myChart.resize();
        });
      }
    }
  }
</script>
